﻿
@{
    ViewBag.Title = "ManageStaffView";
    Layout = "~/Views/Layout/StAdLayout.cshtml";
}
<style>
    td{
        width:150px;
        height:35px;
    }
    .text-info{
        width:200px;
    }
    * {
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
}
a#show-popup {
	
}
div#popup-bg {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:99;
	background:#000;
	display:none;
}
div#popup {
	width:680px;
	height:480px;
	border:solid 4px #000000;
	z-index:999;
	display:none;
	background:#FFF;
}
div#popup-header {
	position:relative;
	float:left;
	width:680px;
	line-height:30px;
	font-size:20px;
	background:#000;
	color:#FF0;
	cursor:move;
}
span#popup-close {
	cursor:pointer;
	color:#FFF;
	font-size:12px;
	position:absolute;
	top:-2px;
	right:10px;
	z-index:9999;
}
div#popup-content {
	width:670px;
	float:left;
	padding:5px;
}
</style>

<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script language="javascript">
    $(document).ready(function () {
        (function ($) {
            //Căn giữa phần tử thuộc tính là absolute so với phần hiển thị của trình duyệt, chỉ dùng cho phần tử absolute đối với body
            $.fn.absoluteCenter = function () {
                this.each(function () {
                    var top = -($(this).outerHeight() / 2) + 'px';
                    var left = -($(this).outerWidth() / 2) + 'px';
                    $(this).css({ 'position': 'absolute', 'position': 'fixed', 'margin-top': top, 'margin-left': left, 'top': '50%', 'left': '50%' });
                    return this;
                });
            }
        })(jQuery);

        $('a#show-popup').click(function () {
            //Đặt biến cho các đối tượng để gọi dễ dàng
            var bg = $('div#popup-bg');
            var obj = $('div#popup');
            var btnClose = obj.find('#popup-close');
            //Hiện các đối tượng
            bg.animate({ opacity: 0.2 }, 0).fadeIn(1000); //cho nền trong suốt
            obj.fadeIn(1000).draggable({ cursor: 'move', handle: '#popup-header' }).absoluteCenter(); //căn giữa popup và thêm draggable của jquery UI cho phần header của popup
            //Đóng popup khi nhấn nút
            btnClose.click(function () {
                bg.fadeOut(1000);
                obj.fadeOut(1000);
            });
            //Đóng popup khi nhấn background
            bg.click(function () {
                btnClose.click(); //Kế thừa nút đóng ở trên
            });
            //Đóng popup khi nhấn nút Esc trên bàn phím
            $(document).keydown(function (e) {
                if (e.keyCode == 27) {
                    btnClose.click(); //Kế thừa nút đóng ở trên
                }
            });
            return false;
        });
    });
</script>
<h2>ManageStaffView</h2>
<div class="tabs">
    <ul class="nav">
        <li class="selected"><a href="#Staff">Staff</a></li>
        <li><a href="#User">User</a></li>
    </ul>
    <div class="content">
        <div class="tab-content" id="Staff">
            <h2>Staff List</h2>
            <table contenteditable="true" border="1" >
                <tr>
                    <td><input type="email" style="width:250px;height:20px"/></td>
                    <td>
                        <span class="right relative" ><a href="#" class="button1" onclick="document.getElementById('form_1').submit()"><strong>Search</strong></a></span>
                    </td>
                </tr>
                    <tr style="font-weight:bold">
                        <td width="35%">ID</td>
                        <td width="35%">Name</td>
                        <td width="35%">Begin Date</td>
                        <td width="30%">Status</td>
                        
                    </tr>
                <tr>
                    <td width="35%">ST01</td>
                    <td width="35%">Kim Nhi </td>
                    <td width="35%">08/12/2010</td>
                    <td >active</td>
                    <td><a href="#" id="show-popup">edit</a></td>                 
</tr>
                <tr>
                    <td width="35%">ST02</td>
                    <td width="35%">Henry</td>
                    <td width="35%">07/10/2011</td>
                    <td>active</td>
                    <td><a href="#" id="show-popup">edit</a></td>
                </tr>
                <tr>
                    <td width="35%">ST03</td>
                    <td width="35%">Kerry</td>
                    <td width="35%">07/11/2012</td>
                    <td>active</td>
                    <td><a href="#" id="show-popup">edit</a></td>
                </tr>
            </table>
            <div class="box1">
                <h2>ADD NEW STAFF</h2>
                <table>
                    <tr>
                        <td width="35%">Username</td>
                        <td width="35%"><input type="email" class="text-info" style="border:groove" required /></td>
                    </tr>
                    <tr>
                        <td width="35%">Password</td>
                        <td width="35%"><input type="password" class="text-info" style="border:groove" /></td>
                    </tr>
                    <tr>
                        <td><span class="right relative" style="width:55px"><a href="#" class="button1" onclick="document.getElementById('form_1').submit()"><strong>Submit</strong></a></span></td>
                        <td><span class="right relative"><a href="#" class="button1" onclick="document.getElementById('form_1').submit()"><strong>Cancel</strong></a></span></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="tab-content" id="User">
            <h2>User List</h2>
            <table>
                <tr>
                    <td><input type="email" style="width:250px;height:20px" /></td>
                    <td>
                        <span class="right relative"><a href="#" class="button1" onclick="document.getElementById('form_1').submit()"><strong>Search</strong></a></span>
                    </td>
                </tr>
                <tr>
                    <td width="35%">ID</td>
                    <td width="35%">Name</td>
                   
                    <td width="30%">Active</td>

                </tr>
                <tr>
                    <td>1</td>
                    <td>Matic</td>
                    <td><input type="checkbox"/></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>John</td>
                    <td><input type="checkbox" /></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Park</td>
                    <td><input type="checkbox" /></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Cathy</td>
                    <td><input type="checkbox" /></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>Yohan</td>
                    <td><input type="checkbox" /></td>
                </tr>
                <tr>
                    <td>
                        <span class="right relative"><a href="#" class="button1" onclick="document.getElementById('form_1').submit()"><strong>Submit</strong></a></span>
                    </td>
                    <td>
                        <span class="right relative"><a href="#" class="button1" onclick="document.getElementById('form_1').submit()"><strong>Cancel</strong></a></span>
                    </td>
                </tr>
            </table>
        </div>

            <br />
           
        </div>
    <div id="popup-bg"></div>
    <div id="popup">
        <div id="popup-header">User information<span id="popup-close" title="Close">x</span></div>
        <div id="popup-content">
            <table>
                <tr>
                    <td>ID</td>
                    <td><input type="text" style="border:inset" placeholder="Current Name"/></td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td><input type="text" style="border:inset" placeholder="Current Password" /></td>
                </tr>
                <tr>
                    <td>
                        Active
                    </td>
                    <td>
                        <input type="checkbox"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <span class="right relative" style="width:55px"><a href="#" class="button1" onclick="document.getElementById('form_1').submit()"><strong>Submit</strong></a></span>
                        
                    </td>
                    <td>
                        <span class="right relative" style="width:55px"><a href="#" class="button1" onclick="document.getElementById('form_1').submit()"><strong>Cancel</strong></a></span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

